<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <title>添加游戏</title>
        <link href="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/theme-chalk/index.css" rel="stylesheet">
        <script src="${path}/resources/dist/js/vue.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/element-ui/2.15.3/index.js"></script>
        <script src="${path}/resources/dist/js/jquery-3.5.1.min.js"></script>
        <link rel="stylesheet" type="text/css" href="${path}/resources/dist/css/login3.css"/>
        <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
        <script src="https://cdn.bootcdn.net/ajax/libs/qs/6.10.1/qs.js"></script>
        <style>
            #app {
                width: 600px;
                margin: 0px auto;
            }
            .avatar-uploader .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;
            }
            .avatar-uploader .el-upload:hover {
                border-color: #409EFF;
            }
            .avatar-uploader-icon {
                font-size: 28px;
                color: #8c939d;
                width: 178px;
                height: 178px;
                line-height: 178px;
                text-align: center;
            }
            .avatar {
                width: 178px;
                height: 178px;
                display: block;
            }
        </style>
    </head>
    <body>
        <div id="app">
            <template>
            <div class="code-box">
                <el-form :label-position="labelPosition" label-width="80px" :model="addGamelist">
                    <el-form-item label="游戏名称">
                        <el-input v-model="addGamelist.gname" style="width: 455px;"></el-input>
                    </el-form-item>
                    <el-form-item label="游戏标题">
                        <el-input v-model="addGamelist.title" style="width: 455px;"></el-input>
                    </el-form-item>
                    <el-form-item label="游戏大小">
                        <el-input v-model="addGamelist.size" style="width: 455px;"></el-input>
                    </el-form-item>
                    <el-form-item label="图标" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="/fileUpdateLoad.do"
                                :show-file-list="false"
                                :on-success="successFileUpload">
                            <img v-if="imageUrl" :src="imageUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>
                    <el-form-item label="详情图片" :label-width="formLabelWidth">
                        <el-upload
                                class="avatar-uploader"
                                action="/fileUpdateLoad.do"
                                :show-file-list="false"
                                :on-success="successUpload">
                            <img v-if="pricturesUrl" :src="pricturesUrl" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="IOS">
                        <el-select v-model="addGamelist.iosUrl" placeholder="IOS下载地址" style="width:155px;">
                            <el-option v-for="item in iosurllist"
                                       :label="item.iosUrl"
                                       :value="item.iosUrl">
                            </el-option>
                        </el-select>
                        <el-input v-model="addGamelist.iosUrl" style="width: 300px;"></el-input>
                    </el-form-item>
                    <el-form-item label="Android">
                        <el-select v-model="addGamelist.androidUrl" placeholder="Android下载地址" style="width:155px;">
                            <el-option v-for="item in Androidurllist"
                                       :label="item.androidUrl"
                                       :value="item.androidUrl">
                            </el-option>
                        </el-select>
                        <el-input v-model="addGamelist.androidUrl" style="width: 300px;"></el-input>
                    </el-form-item>


                    <el-form-item label="推荐类型">
                        <el-select v-model="addGamelist.rectype" placeholder="推荐类型" style="width:455px;">
                            <el-option label="首页推荐" :value=0></el-option>
                            <el-option label="精选" :value=1></el-option>
                            <el-option label="最新" :value=2></el-option>
                            <el-option label="普通" :value=3></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="状态">
                        <el-select v-model="addGamelist.gsatus" placeholder="状态" style="width:455px;">
                            <el-option label="未启用" :value=0></el-option>
                            <el-option label="启用" :value=1></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="游戏分类">
                        <el-select v-model="addGamelist.tid" placeholder="游戏类型" style="width:455px;">
                            <el-option v-for="item in gameType"
                                       :label="item.typeName"
                                       :value="item.typeId">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="平台类型">
                        <el-select v-model="addGamelist.platform" placeholder="平台类型" style="width:455px;">
                            <el-option label="ALL" :value=1></el-option>
                            <el-option label="Android" :value=2></el-option>
                            <el-option label="IOS" :value=3></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="游戏描述">
                        <el-input v-model="addGamelist.des" type="textarea" style="width: 455px;"></el-input>
                    </el-form-item>
                    <el-button type="primary" round @click="addGame">保存</el-button>
                </el-form>
            </div>
            </template>
        </div>
        <script>
            new Vue({
                el: "#app",
                data: {
                    formLabelWidth: "80px",
                    labelPosition: 'right',
                    iosurllist: [],
                    Androidurllist: [],
                    gameiconlist: [],
                    picturesList: [],
                    gameType: [],
                    addGamelist: {
                        gname: "",
                        title: "",
                        downloadCount: 1,
                        size: 1,
                        des: "",
                        gameIcon: "",
                        iosUrl: "",
                        androidUrl: "",
                        prictures: "",
                        gstatus: 1,
                        tid: 1,
                        recType: 1,
                        platform: 1,
                    },
                    imageUrl: '',
                    pricturesUrl: '',

                },
                methods: {
                    addGame() {
                        let vm = this;
                        var data = window.Qs.stringify(this.addGamelist);
                        axios({
                            url: "/game.do",
                            method: "post",
                            data: "method=addGame&" + data,
                        }).then(function (response) {
                            if (response.data == "添加成功") {
                                alert("添加成功")
                                location.href = "${path}/page/game/game/showAllGame.jsp"
                            }
                        })
                    },
                    successFileUpload(response, file, fileList) {// 文件上传成功
                        this.imageUrl = URL.createObjectURL(file.raw);
                        console.log(response)
                        this.addGamelist.gameIcon = response;
                    },
                    successUpload(response, file, fileList) {
                        this.pricturesUrl = URL.createObjectURL(file.raw);
                        this.addGamelist.prictures = response
                    },
                },
                mounted() {
                    let vm = this;
                    axios({
                        url: "/type.do",
                        method: "post",
                        data: "method=gameType"
                    }).then(function (response) {
                        vm.gameType = response.data;
                    })
                    axios({
                        url: "/game.do",
                        method: "post",
                        data: "method=iosurlList"
                    }).then(function (response) {
                        vm.iosurllist = response.data
                    })
                    axios({
                        url: "/game.do",
                        method: "post",
                        data: "method=androidurlList"
                    }).then(function (response) {
                        vm.Androidurllist = response.data
                    })
                    // axios({
                    //     url: "/game.do",
                    //     method: "post",
                    //     data: "method=gameiconList"
                    // }).then(function (response) {
                    //     vm.gameiconlist = response.data
                    // })
                    // axios({
                    //     url: "/game.do",
                    //     method: "post",
                    //     data: "method=gamepicturesList"
                    // }).then(function (response) {
                    //     vm.picturesList = response.data
                    // })
                }
            })
        </script>
    </body>
</html>
